// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

@use '~@mozilla-protocol/core/protocol/css/includes/lib' as *;
@use '../includes/lib' as *;

// * -------------------------------------------------------------------------- */
// Hero component

.vpn-hero {
    margin: $layout-md 0 0;
    text-align: center;
}

.vpn-hero-container {
    position: relative;
}

.vpn-hero-body {
    margin: 0 auto;
    max-width: 480px;
}

.vpn-hero-heading {
    @include image-replaced;
    background: transparent url('/media/protocol/img/logos/mozilla/vpn/logo-word-hor-stack.svg') top left no-repeat;
    @include background-size(175px 60px);
    height: 60px;
    margin: 0 auto $spacing-lg;
    width: 175px;
}

.vpn-hero-sub-heading {
    @include text-title-md;
    margin-bottom: $spacing-md;
}

.vpn-hero-desc {
    @include text-body-lg;
    margin-bottom: $spacing-md;
}

.vpn-hero-tagline {
    @include text-body-lg;
    font-weight: bold;
    margin-top: $layout-lg;
}

.vpn-hero-image {
    display: none;
    position: relative;

    picture {
        @include bidi((
            (left, 0, right, 0),
        ));
        height: 480px;
        position: absolute;
        top: 0;
        width: 480px;
    }
}

@media #{$mq-md} {
    .vpn-hero-sub-heading {
        @include text-title-lg;
    }

    .vpn-hero-desc {
        @include text-body-xl;
    }
}

@media #{$mq-lg} {
    .vpn-hero .mzp-l-content {
        min-height: 480px;
    }

    .vpn-hero-body {
        @include bidi((
            (float, left, right),
            (text-align, left, right),
            (padding-right, $spacing-2xl, 0),
        ));
        max-width: none;
        width: calc(100% - 480px - #{$spacing-2xl});
    }

    .vpn-hero-heading {
        margin: 0 0 $spacing-xl;
    }

    .vpn-hero-sub-heading {
        margin-bottom: $spacing-xl;
    }

    .vpn-hero-desc {
        margin-bottom: $spacing-2xl;
    }

    .vpn-hero-tagline {
        margin-top: $layout-xl;
    }

    .vpn-hero-image {
        @include bidi((
            (float, left, right),
        ));
        display: block;
    }
}
